import { FC, useCallback } from 'react';
import { Alert, Statistic, Card, Row, Col, Avatar, Space, Popover, Divider } from 'antd';
import Marquee from 'react-fast-marquee';
import dayjs from 'dayjs';
import { observer, useLocalStore } from 'mobx-react';

import womanAvatar from '@assets/images/woman.svg';
import userInfoBgc from '@assets/images/userInfoBgc.svg';
import Icons from '@components/Icons';
import { menuLayoutStore } from '@/stores/MenuLayout';

import styles from './index.module.less';

const homePageInfo = [
  {
    key: 'newUser',
    title: '新注册用户',
    type: 'up',
    numerical: 100,
    precision: 0,
    symbol: '人',
    color: '#3f8600'
  },
  {
    key: 'logoffUser',
    title: '注销用户',
    type: 'down',
    numerical: 10,
    precision: 0,
    symbol: '人',
    color: '#cf1322'
  },
  {
    key: 'activeUser',
    title: '本周活跃用户',
    type: 'up',
    numerical: 66,
    precision: 0,
    symbol: '人',
    color: '#3f8600'
  },
  {
    key: 'onlineUser',
    title: '在线人数',
    type: 'up',
    numerical: 88,
    precision: 0,
    symbol: '人',
    color: '#3f8600'
  }
];

const HomePage: FC = () => {
  const store = useLocalStore(() => menuLayoutStore);

  const CardMetaDescription = useCallback(() => {
    return (
      <>
        <div>
          <Space>
            <Icons type="MobileOutlined" />
            {store.userInfo.phone}
          </Space>
        </div>
        <div>
          <Space>
            <Icons type="MailOutlined" />
            {store.userInfo.email}
          </Space>
        </div>
        <div className={styles.rbWorkSpaceHomePageUserCardMetaDescriptionRemark}>
          <Popover content={store.userInfo.remark}>{store.userInfo.remark}</Popover>
        </div>
      </>
    );
  }, []);

  const getWeek = useCallback((dayNumber: number) => {
    const weekDescribeArr = ['一', '二', '三', '四', '五', '六', '日'];
    if (dayNumber) {
      return `星期${weekDescribeArr[dayNumber - 1]}`;
    } else {
      return '星期日';
    }
  }, []);

  const nowDate = dayjs().format('YYYY-MM-DD');
  const nowWeek = getWeek(dayjs().day());

  return (
    <div className={styles.rbWorkSpaceHomePageContent}>
      <div className={styles.rbWorkSpaceHomePageNoticeContent}>
        <Alert
          type="success"
          banner
          icon={<Icons type="NotificationOutlined" />}
          message={
            <Marquee
              pauseOnHover // 鼠标移上暂停移动
              gradient={false} // 是否渐变
            >
              <Space>
                <span>
                  尊敬的 {store.userInfo.username} 用户，欢迎使用 {store.systemInfo.rbName} ！
                </span>
                <span>
                  {nowDate} {nowWeek}
                </span>
                <span>Copyright ©2022 Author®.All rights reserved.</span>
              </Space>
            </Marquee>
          }
        />
      </div>
      <div className={styles.rbWorkSpaceHomePageInfoContent}>
        <div className={styles.rbWorkSpaceHomePageUserInfoContent}>
          <Card hoverable cover={<img alt="userInfo" src={userInfoBgc} />}>
            <Card.Meta
              avatar={
                <Avatar style={{ backgroundColor: 'rgb(234, 237, 242)' }} src={womanAvatar} />
              }
              title={store.userInfo.username}
              description={<CardMetaDescription />}
            />
          </Card>
        </div>
        <div className={styles.rbWorkSpaceHomePageDataChangeContent}>
          <Row gutter={24}>
            {homePageInfo.map(item => (
              <Col span={6} key={item.key}>
                <Card hoverable>
                  <Statistic
                    title={item.title}
                    value={item.numerical}
                    precision={item.precision}
                    suffix={item.symbol}
                    valueStyle={{ color: item.color }}
                    prefix={
                      item.type === 'up' ? (
                        <Icons type="ArrowUpOutlined" />
                      ) : (
                        <Icons type="ArrowDownOutlined" />
                      )
                    }
                  />
                </Card>
              </Col>
            ))}
          </Row>
          <Divider dashed />
        </div>
      </div>
    </div>
  );
};

export default observer(HomePage);
